<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="block">
              <span class="demonstration">
                &nbsp; 请选择需要配置的设备 :&nbsp;&nbsp;&nbsp;
              </span>
              <el-cascader
                v-model="deviceValue"
                ref="cascader"
                :options="options"
                style="width:250px"
                :props="{ expandTrigger: 'hover' }"
                @change="getCheck"
              ></el-cascader>
              <el-button
                style="float: right; padding: 10px 5px"
                type="primary"
                @click="addChecks"
                icon="el-icon-plus"
                >添加点检内容</el-button
              >
            </div>
          </div>
          <template>
            <el-table :data="deviceCheckContentList" style="width: 100%">
              <el-table-column label="日期" align="center">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{
                    scope.row.createTime
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="类别" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.deviceName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工序" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.orderName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="区域" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.checkName }}</span>
                </template>
              </el-table-column>
              
              <el-table-column label="点检内容" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-main>
    </el-container>

    <!-------------------------------- 配置点检项弹窗 ---------------------------------->
    <el-dialog
      :append-to-body="true"
      title="添加点检项"
      :visible.sync="dialogFormVisible"
      center
    >
      <el-form :model="form" size="small">
        <el-form-item label="所属设备" :label-width="formLabelWidth">
          <el-input v-model="form.deviceName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属工序" :label-width="formLabelWidth">
          <el-input v-model="form.orderName" autocomplete="off" placeholder="机加工位置"></el-input>
        </el-form-item>
        <el-form-item label="点检名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.checkName"
            autocomplete="off"
            width="100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="添加点检内容" :label-width="formLabelWidth">
          <el-button type="primary" @click="addOneList">
            + 点我添加一条</el-button
          >
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-table
            :data="form.tableCell"
            ref="table"
            tooltip-effect="dark"
            border
            style="width: 93%"
          >
            <el-table-column label="点检内容">
              <template slot-scope="scope">
                <el-input
                  class="require_des"
                  v-model="scope.row.text"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCheckLists(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMachineDeviceList,
  getFoundyDeviceList,
  getPlantCheckDeviceList,
} from "../../api/device";
import {
  applyCheckContentConfig,
  getDeviceCheckContentList,
} from "../../api/check";

export default {
  name: "checkConfig",
  data() {
    return {
      deviceCheckContentList: [],
      dialogFormVisible: false,
      form: {
        farmName:'',
        farmID:'',
        deviceName: "",
        deviceID: "",
        checkName: "",
        orderID:'',
        orderName:'',
        tableCell: [{ text: "" }],
      },
      formLabelWidth: "120px",
      deviceValue: "",
      options: [
        { label: "铸造车间", value: "3", children: [] },
        { label: "机加工车间", value: "1", children: [] },
        { label: "涂装车间", value: "2", children: [] },
      ],
    };
  },
  created() {
    this.foundyDeviceList();
    this.machineDeviceList();
    this.plantDeviceList();
  },
  methods: {
    handleDelete(index,row){
      console.log(index + row);
    },
    //根据设备ID获取设备相应点检项目
    getCheck() {
      console.log(this.$refs.cascader.getCheckedNodes());
      const farmID = this.$refs.cascader.getCheckedNodes()[0].path[0];
      //判断是不是选择机加工车间
      if(farmID === "1"){
        const device = {
          farmID: this.$refs.cascader.getCheckedNodes()[0].path[0],
          deviceID: this.$refs.cascader.getCheckedNodes()[0].parent.value,
          orderID: this.$refs.cascader.getCheckedNodes()[0].value
        };

        getDeviceCheckContentList(device)
          .then((res) => {
            this.deviceCheckContentList = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }else{
        const device = {
          farmID: this.$refs.cascader.getCheckedNodes()[0].path[0],
          deviceID: this.$refs.cascader.getCheckedNodes()[0].value
        };
        getDeviceCheckContentList(device)
          .then((res) => {
            this.deviceCheckContentList = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
        }
    },
    //获取 铸造 点检设备列表
    foundyDeviceList() {
      const foundry = [
        { label: "A班", value: "301", children: [] },
        { label: "B班", value: "302", children: [] },
      ];
      getFoundyDeviceList().then((res) => {
        for (const i of res.data) {
          if (i.productlineID === 301) {
            foundry[0].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          if (i.productlineID === 302) {
            foundry[1].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
        }
        for (const ele of foundry) {
          this.options[0].children.push(ele);
        }
      });
    },
    //获取 机加工 点检设备列表
    machineDeviceList() {
      const machine = [
        { label: "A班", value: "101", children: [] },
        { label: "N班", value: "102", children: [] },
      ];
      const order = [
        { value: "1", label: "一序"},
        { value: "2", label: "二序"},
        { value: "3", label: "钻床"}
      ];
      getMachineDeviceList().then((res) => {
        for (const i of res.data) {
          if (i.productlineID === 101) {
            machine[0].children.push({
              label: i.deviceName,
              value: i.deviceId,
              children:order
            });
          }
          if (i.productlineID === 102) {

            machine[1].children.push({
              label: i.deviceName,
              value: i.deviceId,
              children:order
            });
          }
        }
        for (const ele of machine) {
          this.options[1].children.push(ele);
        }
      });
    },
    //获取 涂装 点检设备列表
    plantDeviceList() {
      const plant = [
        { label: "涂装A线", value: "201", children: [] },
        { label: "涂装B线", value: "202", children: [] },
        { label: "涂装C线", value: "203", children: [] },
        { label: "涂装D线", value: "204", children: [] },
        { label: "涂装精车", value: "205", children: []},
        // { label: "涂装精检A", value: "206",children: []},
        // { label: "涂装精检C", value: "207",children: []},
      ];
      getPlantCheckDeviceList().then((res) => {
        for (const i of res.data) {
          if (i.productlineID === 201) {
            plant[0].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          if (i.productlineID === 202) {
            plant[1].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          if (i.productlineID === 203) {
            plant[2].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          if (i.productlineID === 204) {
            plant[3].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          if (i.productlineID === 205) {
            plant[4].children.push({
              label: i.deviceName,
              value: i.deviceId,
            });
          }
          // if (i.productlineID === 206) {
          //   plant[5].children.push({
          //     label: i.deviceName,
          //     value: i.deviceId,
          //   });
          // }
          // if (i.productlineID === 207) {
          //   plant[6].children.push({
          //     label: i.deviceName,
          //     value: i.deviceId,
          //   });
          // }
        }
        for (const ele of plant) {
          this.options[2].children.push(ele);
        }
      });
    },
    //提交设备点检内容
    addCheckLists(form) {
      const farmID = this.$refs.cascader.getCheckedNodes()[0].path[0];
      if(farmID === "1"){
        this.form.deviceID = this.$refs.cascader.getCheckedNodes()[0].parent.value;
        this.form.farmName = this.$refs.cascader.getCheckedNodes()[0].pathLabels[0];
        this.form.farmID = farmID;
        this.form.orderID = this.$refs.cascader.getCheckedNodes()[0].value;
      }else{
        this.form.deviceID = this.$refs.cascader.getCheckedNodes()[0].value;
        this.form.farmName = this.$refs.cascader.getCheckedNodes()[0].pathLabels[0];
        this.form.farmID = farmID;
      }
      
      console.log(form);
      applyCheckContentConfig(form)
        .then((res) => {
          console.log(res);
          if(res.status === 200){
            this.$message({
              message: '恭喜你, 提交成功!',
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.getCheck();
          }else{
            this.$message({
              message: '出现错误, 提交失败!',
              type: 'warning'
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addOneList() {
      var cell = { text: "" };
      this.form.tableCell.unshift(cell);
    },
    addChecks() {
      const device = this.$refs.cascader.getCheckedNodes();
      if (device.length === 0) {
        this.$message({
          message: '请先选择要配置的设备',
          type: 'warning'
        });
      } else if(this.$refs.cascader.getCheckedNodes()[0].path[0] === "1"){
        this.form.deviceName = this.$refs.cascader.getCheckedNodes()[0].parent.label;
        this.form.orderName = this.$refs.cascader.getCheckedNodes()[0].label;
        this.dialogFormVisible = true;
      }else{
        this.form.orderName = '0';
        this.form.orderID = '0';
        this.form.deviceName = this.$refs.cascader.getCheckedNodes()[0].label;
        this.dialogFormVisible = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.text {
  font-size: 14px;
}
.el-col-12 {
  width: 100%;
}
.item {
  margin-bottom: 18px;
}
.el-main {
  padding: 0ex;
}
.el-aside {
  height: 86vh;
  background-color: #fff;
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>